.modalbox{  
    .modalbox-mask{
        position: fixed;background: rgba(0,0,0,.7);left: 0;top: 0;right: 0;bottom: 0;z-index: -1;opacity: 0;  
        transition: opacity .25s linear; 
    }
    .modalbox-cont{
        width: 85%; max-width: 640px; position: fixed; left: 50%;top: 50%;transform: translate(-50%,-50%) scale(0);opacity: 0; z-index: 10021;   
        background-image: url("../images/modalbox-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 70px 0 60px 0;   
        transition: all .275s cubic-bezier(0,0,.58,1);
        &.upgrade-success-tips{
            background: none;padding:0;
        }
        &.none_nub_tip{
            //modalbox-bg2
            background-image: url("../images/modalbox-bg2.png");
            .inner-box{
                min-height: 0;
            } 
        }
        .inner-box{
            // position: absolute;width:100%;left:0; top: 50%; transform: translate(0,-50%);box-sizing: border-box;  
            min-height: 350px;      
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            color: #fff;
            &.align-c{
                justify-content: center;
            }
            .card{width: 66%;margin-bottom: 10px;}
            .tips{font-size: 1.1rem;}
            .copy-btn{margin-top: 35px;padding-bottom: 10px;}
            .password-txt{font-size: 1.8rem;line-height: 2;padding-bottom: 20px;padding-top: 15px;overflow: hidden;}
            .f15{
                font-size: 1.5rem;line-height: 2;
            }
            .modalbox-btn{
                width: 55%;
            }
        }
    }
    &.opened{
        .modalbox-mask{
            z-index:10000;
            opacity: 1;
        }
        .modalbox-cont{
            transform: translate(-50%,-50%) scale(1);opacity: 1;
        } 
    }
}
.close{
    width: 44px;height: 44px;
    background-image: url("../images/close.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;left: 50%;bottom: -55px;
    transform: translate(-50%,0);
    border:1px #fff solid;border-radius: 50%; border-width: 0.5px;
    &.next-btn{
        width: 84px;height: 38px;background-image: url("../images/next-btn.png");
        border-radius: 10px;bottom: -50px;
    }
}
.rule-popup{
    .rule-popup-mask{
        position: fixed;background: rgba(0,0,0,.7);left: 0;top: 0;right: 0;bottom: 0;z-index: -1;opacity: 0;  
        transition: opacity .25s linear; 
    }
    .rule-popup-cont{
        width: 100%; max-width: 640px; height: 80%; position: fixed; left: 50%;top: 50%;transform: translate(-50%,-55%) scale(0);opacity: 0; z-index: 10021;
        background: url("../images/rule-bg.png") no-repeat;
        background-size: 100% 100%;
        transition: all .275s cubic-bezier(0,0,.58,1);   
        .inner-scroll{
            width: 76%;left: 12%;top: 7.5%;bottom: 7.5%;position: absolute;box-sizing: border-box;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-right: 5px;
            h3{
                width: 42.5%;margin:0 auto;
            }
            h4{
                font-weight: bold;color: #fff;display: inline-block;margin-top: 10px;margin-bottom: 5px;
                background: #595cc7;
                background-image: linear-gradient(to right, #595cc7 25%,#415bc7 50%,#fff);
                padding: 0 25px 0 12px;
            }
            p{
                padding-bottom: 4px;
            }
        }    
    }
    &.opened{
        .rule-popup-mask{
            z-index:10000;
            opacity: 1;
        }
        .rule-popup-cont{
            transform: translate(-50%,-55%) scale(1);opacity: 1;
        } 
    }
}

.share-tips{
    position: fixed;left: 0;right: 0;bottom: 0;top: 0;z-index: -1;
    background: rgba($color: #000000, $alpha: 0.7);opacity:0;
    transition: opacity .275s linear;
    &.show{
        z-index: 100030;
        opacity:1; 
    }
}
.modalbox-form{
    width: 100%;padding:10px 0 15px 0;
    .item{
        padding: 6px 0; overflow: hidden;
        &.code-item{
            .input{
                width: 25%;margin-right: 6px;
            }
            .get-code{
                line-height:30px;background: #fff;color:#666;border-radius: 4px;float: left;border:none;padding: 0 5px;font-size: 1.2rem;margin-top:0;
                &.disabled{
                    background: #dedede;color: #999;
                }
            }
        }
        .label{
            width: 33.5%;line-height:30px; font-size: 1.5rem;text-align: right;box-sizing: border-box;
            padding-right: 10px;float: left;
        }
        .input{
            width: 49%;float: left;font-size: 1.5rem;
            height: 30px;line-height: 18px;padding: 5px;
            background: none;
            border:1px #fff solid;
            color:#fff;
            border-radius: 6px;
            box-sizing: border-box;
        }
    }
    .txt{
        padding-left: 33.5%;text-align: left;line-height: 1.2;font-size: 1rem;
    }
}

.tips-pop-box{
    background: rgba(0,0,0,0);
    position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 10039;
    transition: opacity .25s cubic-bezier(0.075, 0.82, 0.165, 1);
    &.opened{
        background: rgba(0,0,0,0.5);
        .txt-tips-pop{
            transform: translate(-50%,0);opacity: 1;
        }     
    }
}
.txt-tips-pop{
    width: 100%;
    max-width:768px;
    padding: 13px 44px 13px 30px;box-sizing: border-box;
    background: rgba(0,0,0,.8);
    line-height: 1.3;
    position: fixed;z-index: 10040;
    left: 50%;top: 0;
    transform: translate(-50%,-100%);opacity: 0;
    transform-origin: top center;
    transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    // transition: all .275s linear;
    font-size: 1.5rem;
    .error{
        color:red;;
    }
    .success{
        color: #fff;
    }
    .close-tips{
        width: 44px;height: 44px;opacity: 0.7;
        background: url("../images/close.png") center center;
        background-size: 30px 30px;
        position: absolute;top: 50%;right: 0;margin-top: -22px;
    }   
}

@media screen and (max-width:320px) {
    .modalbox{
        .modalbox-cont{
            padding: 50px 0 40px 0;
        }
    }
    .modalbox-form{
        .item{
            padding: 3px 0;
        }
    }
}